body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    height: 100%; /* 固定高度为1300px */
    position: relative; /* 添加相对定位 */
    overflow-x: hidden; /* 禁止水平滚动条 */
    overflow: hidden; /* 禁止滚动 */
}
.background {
    position: absolute; /* 使用绝对定位 */
    bottom: 0;
    left: 0;
    height: 100%; /* 自适应高度 */
    z-index: -1; /* 确保背景图像位于其他内容之后 */
}
.top-header{
     position: absolute;
     top:1%;
     left:29%;
}
.map {
	position: relative;
	height: 1200px;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index:-1;
	top:-150px;
}

.map img {
    width:400px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 100%;
	max-height: 100%;
	z-index:-1;
}

@font-face {
    font-family: 'CustomFont'; /* 自定义字体的名称 */
    src: url('simhei.ttf') format('truetype'); /* 字体文件的路径和格式 */
}

h1 {
    font-family: 'CustomFont', Arial, sans-serif; /* 使用自定义字体，如果不可用则使用备选字体 */
    text-align: left;
    color: #fff;
    margin: 0;
    font-size:32px;
    position: absolute; /* 使用绝对定位，以便于它们之间的相互位置调整 */
    left: 50%; /* 设置left属性为50%，使元素居中 */
    top: 10px; /* 根据需要调整top属性，使元素位于页面的顶部 */
    transform: translateX(-50%); /* 通过transform属性调整元素位置 */
}


#current-date {
    font-family: 'CustomFont', Arial, sans-serif;
    position: absolute;
    top:6.5%;
    left:78%;
    font-family: Arial, sans-serif; /* 使用合适的字体 */
    font-size: 30px;
    color: #c5ccff;
    border-radius: 5px; /* 添加圆角 */
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); /* 添加阴影 */
}

.chart-line {
    position: absolute;
    top: 69%;
    left: -22%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.line-title{
    font-family: 'CustomFont', Arial, sans-serif;
    position:relative;
    top:-232px;
    left:50%;
    font-size:24px;
    color:#ffeb7b;
}
.line-box{
    position:absolute;
    top:-16%;
    right:18.5%;
    z-index:-1;
}


.chart-bar{
    position: absolute;
    top:69%;
    left: 36%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bar-title{
    font-family: 'CustomFont', Arial, sans-serif;
    width:300px;
    position:relative;
    top:-232px;
    left:56%;
    font-size:24px;
    color:#ffeb7b;
}
.bar-box{
    position:absolute;
    top:-16%;
    left:46%;
    z-index:-1;
}


.chart-map {
    position: absolute;
	top: 40%;
	left: 52%;
	transform: translate(-50%, -50%);
	max-width: 100%;
	max-height: 100%;
	z-index:999;
}
.map-title{
    font-family: 'CustomFont', Arial, sans-serif;
    position:relative;
    top:-30px;
    left:300px;
    font-size:24px;
    color:#ffeb7b;
}

.chart-pie {
    position: absolute;
    left:71%;
    top:28%;
}
.pie-title{
    font-family: 'CustomFont', Arial, sans-serif;
    position:relative;
    left:25%;
    font-size:24px;
    color:#ffeb7b;
}
.pie-box{
    position:absolute;
    top:-2%;
    left:7%;
}

.line{
    content:"";
    position:absolute;
    right:-30px;
    width:600px;
    border-top:2px solid lightblue;
}
.line3{
    content:"";
    position:absolute;
    top:520px;
    right:-30px;
    width:550px;
    border-top:2px solid lightblue;
    z-index:-1;
}
.line2{
    content:"";
    position:absolute;
    top:300px;
    right:-30px;
    width:600px;
    border-top:2px solid lightblue;
}
.line4{
    content:"";
    position:absolute;
    top:820px;
    width:600px;
    border-top:2px solid lightblue;
}
.carousel-title{
    font-family: 'CustomFont', Arial, sans-serif;
    color:#ffeb7b;
    width:200px;
    position:absolute;
    top:520px;
    right:-30px;
    width:420px;
    z-index:-1;
}
.border-bg{
    position:absolute;
    top:8%;
    left:73%;
    z-index:-1;
}